<template>
  <view
    class="gui-bg-gray gui-dark-bg-level-3 gui-flex gui-justify-content-end"
    style="position: fixed; bottom: 0"
    :style="{ zIndex: zIndex, background: bgColor }"
    @tap.stop.prevent="stopfun"
  >
    <text v-if="showInputRes" class="gui-keyboard-res gui-block gui-primary-text" :style="{ fontSize: resultSize }">{{ resVal }}</text>
    <view class="gui-keyboard gui-flex gui-row gui-space-between">
      <view class="gui-keyboard-left gui-flex gui-row gui-wrap gui-space-between">
        <view
          v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
          :key="index"
          class="gui-keyboard-keys gui-bg-white gui-dark-bg-level-1"
          :data-keynumber="item"
          hover-class="gui-tap"
          @tap.stop="inputNow"
        >
          <text class="gui-block gui-keyboard-keys-text gui-primary-text">{{ item }}</text>
        </view>
        <view
          class="gui-keyboard-keys gui-bg-white gui-dark-bg-level-1"
          data-keynumber="0"
          :style="{ width: isPoint ? '259rpx' : '538rpx' }"
          @tap.stop="inputNow"
        >
          <text class="gui-keyboard-keys-text gui-block gui-primary-text" :style="{ width: isPoint ? '259rpx' : '538rpx' }">0</text>
        </view>
        <view
          v-if="isPoint"
          class="gui-keyboard-keys gui-bg-white gui-dark-bg-level-1"
          data-keynumber="."
          :style="{ width: '259rpx' }"
          @tap.stop="inputNow"
        >
          <text class="gui-keyboard-keys-text gui-block gui-primary-text" :style="{ width: '259rpx' }">.</text>
        </view>
      </view>
      <view class="gui-keyboard-right gui-flex gui-columns gui-align-items-center">
        <view class="gui-keyboard-keys gui-bg-white gui-dark-bg-level-1" :data-keynumber="-3" hover-class="gui-tap" @tap.stop="deleteNow">
          <text class="gui-keyboard-keys-text gui-icons gui-block gui-primary-text">&#xe623;</text>
        </view>
        <view class="gui-keyboard-keys gui-keyboard-done gui-bg-primary" hover-class="gui-tap" @tap.stop="done">
          <text class="gui-keyboard-done gui-block gui-color-white">{{ doneBtnName }}</text>
        </view>
      </view>
    </view>
    <!-- iphone 底部适配 -->
    <gui-iphone-bottom v-if="!isSwitchPage" />
  </view>
</template>
<script>
export default {
  name: 'GuiNumberKeyboard',
  props: {
    canCloseByShade: { type: Boolean, default: false },
    doneBtnName: { type: String, default: '完成' },
    isPoint: { type: Boolean, default: true },
    value: { type: String, default: '' },
    showInputRes: { type: Boolean, default: true },
    resultSize: { type: String, default: '32rpx' },
    isSwitchPage: { type: Boolean, default: false },
    zIndex: { type: Number, default: 999 },
    digitNum: { type: Number, default: -1 },
    max: { type: String, default: '' },
    bgColor: { type: String, default: 'rgba(0, 0, 0, 0.7)' },
  },
  emits: ['keyboardInput', 'keyboardDelete', 'keyboardDone'],
  data() {
    return {
      resVal: '',
      tapIndex: -1,
    }
  },
  watch: {
    value: function (val) {
      this.resVal = `${val}`
    },
  },
  created: function () {
    this.resVal = `${this.value}`
  },
  methods: {
    stopfun: function (e) {
      e.stopPropagation()
      return
    },
    inputNow: function (e) {
      const k = e.currentTarget.dataset.keynumber
      if (Number(this.max) <= Number(this.resVal)) {
        return
      }
      // 判断小数
      if (this.digitNum !== -1) {
        // 小数位数
        const num = this.resVal.match(/\.(\d+)/g)
        if (!num || num?.[0].length <= this.digitNum) {
          // 小数点
          const digit = this.resVal.match(/\./g)
          if (!digit || (digit.length <= 1 && k !== '.')) {
            this.resVal += `${k}`
            this.tapIndex = k
            this.$emit('keyboardInput', k)
            this.removeClass()
          }
        }
      } else {
        this.resVal += `${k}`
        this.tapIndex = k
        this.$emit('keyboardInput', k)
        this.removeClass()
      }
    },
    deleteNow: function (e) {
      const k = e.currentTarget.dataset.keynumber
      this.tapIndex = k
      this.resVal = this.resVal.substring(0, this.resVal.length - 1)
      this.$emit('keyboardDelete')
      this.removeClass()
    },
    done: function () {
      this.$emit('keyboardDone')
    },
    setVal: function (val) {
      this.resVal = val
    },
    removeClass: function () {
      setTimeout(() => {
        this.tapIndex = -1
      }, 100)
    },
  },
}
</script>
<style scoped></style>
